<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> 房间
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container my-b">
            <div>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-row class="tac">
                                <el-menu
                                    :default-active=index
                                    class="el-menu-vertical-demo">
                                    <el-submenu index="1">
                                        <template slot="title">
                                            <i class="el-icon-location"></i>
                                            <span slot="title">人物</span>
                                        </template>
                                        <el-menu-item-group>
                                            <div v-for="(item,index) in character_list">
                                                <el-menu-item index=“1-”+index @click="myCha(index)">
                                                    <i class="el-icon-user"></i>
                                                    <span slot="title">角色名:{{ item.name }}</span>
                                                </el-menu-item>
                                            </div>
                                        </el-menu-item-group>
                                    </el-submenu>
                                    <!--                                    <el-submenu index="2">-->
                                    <!--                                      <template slot="title">-->
                                    <!--                                        <i class="el-icon-location"></i>-->
                                    <!--                                        <span slot="title">记事板</span>-->
                                    <!--                                      </template>-->
                                    <!--                                      <el-menu-item-group>-->
                                    <!--                                        <div v-for="(item,index) in note_list">-->
                                    <!--                                          <el-menu-item index=“2-”+index @click="myP(index)">-->
                                    <!--                                            <i class="el-icon-user"></i>-->
                                    <!--                                            <span slot="title">{{item.title}}</span>-->
                                    <!--                                          </el-menu-item>-->
                                    <!--                                        </div>-->
                                    <!--                                      </el-menu-item-group>-->
                                    <!--                                    </el-submenu>-->
                                    <el-submenu index="3">
                                        <template slot="title">
                                            <i class="el-icon-location"></i>
                                            <span slot="title">地图</span>
                                        </template>
                                        <el-menu-item-group>
                                            <div v-for="(item,index) in map_List">
                                                <el-menu-item index=“2-”+index @click="myG(index)">
                                                    <i class="el-icon-user"></i>
                                                    <span slot="title">{{ item.title }}</span>
                                                </el-menu-item>
                                            </div>
                                        </el-menu-item-group>
                                    </el-submenu>
                                </el-menu>
                                <el-button type="primary" v-if="is_host" @click="role_change_visible = true">更改玩家权限
                                </el-button>
                                <el-button type="primary" @click="myReload()">刷新</el-button>
                                <el-dialog title="修改玩家权限"
                                           :visible.sync="role_change_visible"
                                           :append-to-body="true">
                                    <span>修改权限</span>
                                    <el-form :model="this">
                                        <el-select v-model="change_role.target_uid" placeholder="请选择">
                                            <el-option
                                                v-for="item in player_list"
                                                :key="item.uid"
                                                :label="item.userName"
                                                :value="item.uid">
                                            </el-option>
                                        </el-select>
                                        <el-form-item label="0为观众1为玩家">
                                            <el-input-number v-model="change_role.level" :min="0" :max="1"
                                                             label="0为观众1为玩家"></el-input-number>
                                        </el-form-item>
                                    </el-form>
                                    <span>
                                      <el-button @click="role_change_visible = false">取 消</el-button>
                                      <el-button type="primary" @click="submitRoleChange">确 定</el-button>
                                    </span>
                                    <br>
                                    <span>赋予角色</span>
                                    <el-form :model="this">
                                        <el-select v-model="give_character.uid" placeholder="请选择">
                                            <el-option
                                                v-for="item in player_list"
                                                v-if="item.level===1"
                                                :key="item.uid"
                                                :label="item.userName"
                                                :value="item.uid">
                                            </el-option>
                                        </el-select>
                                        <el-form-item label="输入角色的cid">
                                            <el-input-number v-model="give_character.rid"
                                                             label="输入角色的cid"></el-input-number>
                                        </el-form-item>
                                    </el-form>
                                    <span>
                                      <el-button @click="role_change_visible = false">取 消</el-button>
                                      <el-button type="primary" @click="submitGiveCharacter">确 定</el-button>
                                    </span>
                                </el-dialog>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <RoomChatList v-bind:room_info="room_info"
                                          v-bind:authority="authority"
                                          v-bind:level="level"></RoomChatList>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div v-if="index===3">
                                <p class="my-center">地图</p>
                                <div>
                                    <p>{{ this.map_List[index_num].title }}</p>
                                </div>
                                <el-image
                                    style="width: 100%; height: 100%"
                                    :src=this.map_List[index_num].url
                                >
                                </el-image>
                            </div>
                            <div v-if="index===2">
                                <p class="my-center">记事板</p>
                                <div class="trans">
                                    <el-card>
                                        <div style="padding: 14px;">
                                            <span>{{ note_list[index_num].title }}</span>
                                            <div class="bottom clearfix">
                                              <span>
                                                <p>
                                                  id: {{ note_list[index_num].id }}
                                                </p>
                                                <p>
                                                  content: {{ note_list[index_num].content }}
                                                </p>
                                              </span>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                            <div v-if="index===1">
                                <p class="my-center">人物</p>
                                <div class="trans">
                                    <div>
                                        <p class="my-center">{{ character_list[index_num].name }}</p>
                                        <el-button type="primary" @click="change_character_info = true">更改数值</el-button>
                                        <p>生命值：{{ character_list[index_num].hp_percentage }}</p>
                                        <el-progress :percentage=character_list[index_num].hp_percentage
                                                     :color=green_color></el-progress>
                                        <p>魔力值：{{ character_list[index_num].mp_percentage }}</p>
                                        <el-progress :percentage=character_list[index_num].mp_percentage
                                                     :color=blue_color></el-progress>
                                        <p>理智值：{{ character_list[index_num].san_percentage }}</p>
                                        <el-progress :percentage=character_list[index_num].san_percentage
                                                     :color=yellow_color></el-progress>
                                    </div>
                                    <br>
                                    <br>
                                    <div>
                                        <table border="1">
                                            <tr>
                                                <th colspan="1" width="50">力量</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.STR }}</th>
                                                <th colspan="1" width="50">体质</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.CON }}</th>
                                                <th colspan="1" width="50">体型</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.SIZ }}</th>
                                            </tr>
                                            <tr>
                                                <th colspan="1" width="50">敏捷</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.DEX }}</th>
                                                <th colspan="1" width="50">外貌</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.APP }}</th>
                                                <th colspan="1" width="50">智力</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.INT }}</th>
                                            </tr>
                                            <tr>
                                                <th colspan="1" width="50">意志</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.POW }}</th>
                                                <th colspan="1" width="50">教育</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.EDU }}</th>
                                                <th colspan="1" width="50">幸运</th>
                                                <th colspan="2" width="100">{{ character_list[index_num].attribue.LUCK }}</th>
                                            </tr>
                                            <tr>
                                                <th colspan="1" width="50">hp</th>
                                                <th colspan="1" width="50">{{ character_list[index_num].hms.hp }}</th>
                                                <th colspan="1" width="50">{{ character_list[index_num].hms.hp_max }}</th>
                                                <th colspan="1" width="50">mp</th>
                                                <th colspan="1" width="50">{{ character_list[index_num].hms.mp }}</th>
                                                <th colspan="1" width="50">{{ character_list[index_num].hms.mp_max }}</th>
                                                <th colspan="1" width="50">san</th>
                                                <th colspan="1" width="50">{{ character_list[index_num].hms.san }}</th>
                                                <th colspan="1" width="50">{{ character_list[index_num].hms.san_max }}</th>
                                            </tr>
                                        </table>
                                    </div>
                                    <br>
                                    <br>
                                    <!--                                <el-table :data="character_list[index_num].attribue" style="width: 100%">-->
                                    <!--                                  <el-table-column align="middle" prop="name" label="名称"></el-table-column>-->
                                    <!--                                  <el-table-column align="middle" prop="numDefault" label="数值"></el-table-column>-->
                                    <!--                                </el-table>-->
                                    <el-table :data="character_list[index_num].ability" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"></el-table-column>
                                        <el-table-column align="middle" prop="numPro" label="职业数值"></el-table-column>
                                        <el-table-column align="middle" prop="numHobby" label="兴趣数值"></el-table-column>
                                        <el-table-column align="middle" prop="numLearn" label="成长数值"></el-table-column>
                                    </el-table>
                                    <!--                                <el-table>-->
                                    <!--                                  <el-table-body>-->

                                    <!--                                  </el-table-body>-->
                                    <!--                                  <tbody>-->
                                    <!--                                  <tr>-->
                                    <!--                                    <td>-->
                                    <!--                                      <span>力量</span>-->
                                    <!--                                    </td>-->
                                    <!--                                    <td>-->
                                    <!--                                      <span>{{character_list[index_num].attribue.STR}}</span>-->
                                    <!--                                    </td>-->
                                    <!--                                    <td>-->
                                    <!--                                      <span>体质</span>-->
                                    <!--                                    </td>-->
                                    <!--                                    <td>-->
                                    <!--                                      <span>{{character_list[index_num].attribue.CON}}</span>-->
                                    <!--                                    </td>-->
                                    <!--                                    <td>-->
                                    <!--                                      <span>体型</span>-->
                                    <!--                                    </td>-->
                                    <!--                                    <td>-->
                                    <!--                                      <span>{{character_list[index_num].attribue.STR}}</span>-->
                                    <!--                                    </td>-->
                                    <!--                                  </tr>-->
                                    <!--                                  </tbody>-->
                                    <!--                                  <tr></tr>-->
                                    <!--                                  <tr></tr>-->
                                    <!--                                  <tr></tr>-->
                                    <!--                                  <tr></tr>-->
                                    <!--                                </el-table>-->
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import ChatRoom from '@/components/page/ChatRoom';
import RoomChatList from '@/components/page/RoomChatList';
import '../../assets/css/ypz.css';
import axios from 'axios';

export default {
    name: 'room',
    components: { ChatRoom, RoomChatList },
    // props:['room_info'],//"chatId": ,"rid":
    data() {
        return {
            change_item: false,
            blue_color: '#409EFF',
            green_color: '#67C23A',
            yellow_color: '#E6A23C',
            // url: require('../../assets/map.jpg'),
            index: 2,
            index_num: 1,
            room_id: 1,
            room_info: {},//"chatId": ,"rid":
            authority: 0,
            is_host: false,
            level: 0,
            dialogFormVisible: false,
            role_change_visible: false,
            change_role: {
                rid: null,
                target_uid: null,
                level: null,
                userId: null
            },
            give_character: {
                uid: null,
                cid: null,
                rid: null
            },
            form: {
                ruleForm: [
                    { label: 'STR' },
                    { label: 'CON' },
                    { label: 'SIZ' },
                    { label: 'DEX' },
                    { label: 'APP' },
                    { label: 'INT' },
                    { label: 'POW' },
                    { label: 'EDU' },
                    { label: 'LUCK' }
                ],
                edit_info: {
                    label: '',
                    value: 0,
                    uid: localStorage.getItem('uid')
                }
            },
            map_List: [
                {
                    id: 1,
                    url: require('../../assets/map.jpg'),
                    title: '地图1'
                },
                {
                    id: 2,
                    url: require('../../assets/map.jpg'),
                    title: '地图2'
                },
                {
                    id: 3,
                    url: require('../../assets/map.jpg'),
                    title: '地图3'
                }

            ],
            character_list: [{
                name: '测试角色1',
                hp_percentage: Math.floor(75),
                mp_percentage: Math.floor(100),
                san_percentage: Math.floor(94),
                attribue: {
                    STR: 1,
                    CON: 2,
                    SIZ: 3,
                    DEX: 4,
                    APP: 5,
                    INT: 6,
                    POW: 7,
                    EDU: 8,
                    LUCK: 9,
                },
                hms:{
                    hp: 10,
                    hp_max: 15,
                    mp: 10,
                    mp_max: 12,
                    san: 10,
                    san_max: 68
                },
                ability: [
                    {
                        name: '信用评级',
                        numDefault: 50,
                        numPro: 45,
                        numHobby: 17,
                        numLearn: 6
                    },
                    {
                        name: '匕首使用',
                        numDefault: 67,
                        numPro: 89,
                        numHobby: 23,
                        numLearn: 12
                    },
                    {
                        name: '话术',
                        numDefault: 34,
                        numPro: 89,
                        numHobby: 67,
                        numLearn: 12
                    }
                ]
            },
                {
                    name: '测试角色2',
                    hp_percentage: Math.floor(75),
                    mp_percentage: Math.floor(100),
                    san_percentage: Math.floor(94),
                    attribue: {
                        STR: 1,
                        CON: 2,
                        SIZ: 3,
                        DEX: 4,
                        APP: 5,
                        INT: 6,
                        POW: 7,
                        EDU: 8,
                        LUCK: 9,
                    },
                    hms:{
                        hp: 8,
                        hp_max: 20,
                        mp: 17,
                        mp_max: 20,
                        san: 15,
                        san_max: 20
                    },
                    ability: [
                        {
                            name: '信用评级',
                            numDefault: 50,
                            numPro: 45,
                            numHobby: 17,
                            numLearn: 6
                        },
                        {
                            name: '攀岩',
                            numDefault: 67,
                            numPro: 89,
                            numHobby: 23,
                            numLearn: 12
                        },
                        {
                            name: '游泳',
                            numDefault: 34,
                            numPro: 89,
                            numHobby: 67,
                            numLearn: 12
                        }
                    ]
                },
                {
                    name: '测试角色3',
                    hp_percentage: Math.floor(75),
                    mp_percentage: Math.floor(50),
                    san_percentage: Math.floor(20),
                    attribue: {
                        STR: 1,
                        CON: 2,
                        SIZ: 3,
                        DEX: 4,
                        APP: 5,
                        INT: 6,
                        POW: 7,
                        EDU: 8,
                        LUCK: 9,
                    },
                    hms:{
                        hp: 12,
                        hp_max: 45,
                        mp: 5,
                        mp_max: 6,
                        san: 1,
                        san_max: 100
                    },
                    ability: [
                        {
                            name: '信用评级',
                            numDefault: 50,
                            numPro: 45,
                            numHobby: 17,
                            numLearn: 6
                        },
                        {
                            name: '驾驶飞机',
                            numDefault: 67,
                            numPro: 89,
                            numHobby: 23,
                            numLearn: 12
                        },
                        {
                            name: '驾驶坦克',
                            numDefault: 34,
                            numPro: 89,
                            numHobby: 67,
                            numLearn: 12
                        }
                    ]
                }
            ],
            player_list: [
                {
                    characterName: '',
                    cid: -1,
                    level: 1,
                    uid: 2,
                    userName: '123456'
                },
                {
                    characterName: '',
                    cid: -1,
                    level: 2,
                    uid: 1,
                    userName: 'TRPGer'
                },
                {
                    characterName: '',
                    cid: -1,
                    level: 1,
                    uid: 3,
                    userName: 'qwerty'
                }
            ],
            note_list: [
                {
                    id: 1,
                    title: '1t',
                    content: '1'
                },
                {
                    id: 2,
                    title: '2t',
                    content: '2'
                },
                {
                    id: 3,
                    title: '3t',
                    content: '3'
                }
            ]
        };
    },
    methods: {
        myCha: function(i) {
            this.index = 1;
            this.index_num = i;
        },
        myP: function(i) {
            console.log(i);
            this.index = 2;
            this.index_num = i;
        },
        myG: function(i) {
            this.index = 3;
            this.index_num = i;
        },

        getMap(url) {
            console.log(url);
            return require(url);
        },
        changeCharacter(item) {
            this.dialogFormVisible = true;
            console.log(this.dialogFormVisible);
        },
        closeC() {
            this.dialogFormVisible = false;
        },
        myReload() {
            location.reload();
        },
        submitGiveCharacter() {
            this.give_character.rid = this.room_info.rid;
            axios.post(
                axios.defaults.baseURL + 'room/setUserRoomCharacter/' + localStorage.getItem('uid') +
                '/' + this.room_info.rid,
                this.give_character
            ).then((res) => {
                if (res.data.code === '000000') {
                    this.$message.success('修改成功');
                } else {
                    this.$message.error(res.data.desc);
                }
            });
            this.dialogFormVisible = false;
        },
        submitRoleChange() {
            this.change_role.rid = this.room_info.rid;
            this.change_role.userId = this.change_role.target_uid;
            //这里更新角色权限
            //上传
            axios.post(
                axios.defaults.baseURL + 'room/setUserRoomRole/' + localStorage.getItem('uid'),
                this.change_role
            ).then((res) => {
                if (res.data.code === '000000') {
                    this.$message.success('修改成功');
                } else {
                    this.$message.error(res.data.desc);
                }
            });
            this.dialogFormVisible = false;
        },
        submitC() {
            //这里更新角色信息
            //上传
            axios.post(
                axios.defaults.baseURL + '?',
                this.form.edit_info
            ).then((res) => {
                if (res.data.code === '000000') {

                } else {
                    this.$message.error(res.data.desc);
                }
            });
            this.dialogFormVisible = false;
        },
        suit(){
            // this.character_list.forEach((item, index) => {
            //     item.hp_percentage = Math.floor(item.attribue.hp / item.attribue.hp_max)* 100;
            //     item.mp_percentage = Math.floor(item.attribue.mp / item.attribue.mp_max)* 100;
            //     item.san_percentage = Math.floor(item.attribue.san / item.attribue.san_max)* 100;
            // });
            this.character_list[1].hms.san+=2
        }
    },
    watch: {
        character_list: {
            handler(val, olVal) {
                // this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight;
                olVal.forEach((item, index) => {
                    item.hp_percentage = Math.floor(item.hms.hp / item.hms.hp_max * 100);
                    item.mp_percentage = Math.floor(item.hms.mp / item.hms.mp_max * 100);
                    item.san_percentage = Math.floor(item.hms.san / item.hms.san_max * 100);
                });
            },
            deep: true
        }
    },
    created() {
        // this.components.ChatRoom.room_id = this.room_id;
        this.room_info = this.$route.query;
        console.log('获得数据');
        console.log(this.room_info);
        //获得用户权限
        axios({
            methods: 'get',
            url: axios.defaults.baseURL + 'room/getUserRoomRole/' + localStorage.getItem('uid') + '/' + this.room_info.rid
        }).then((res) => {
            // this.$message.success("接收到了信息")
            // console.log(res)
            if (res.data.code === '000000') {
                this.level = res.data.content;
                if (res.data.content === 2) {
                    this.is_host = true;
                }
                //获得房间所有用户权限
                if (this.is_host) {
                    axios({
                        methods: 'get',
                        url: axios.defaults.baseURL + 'room/getAllUserRoomRole/' + localStorage.getItem('uid') + '/' + this.room_info.rid
                    }).then((res) => {
                        // this.$message.success("接收到了信息")
                        // console.log(res)
                        if (res.data.code === '000000') {
                            this.player_list = res.data.content;
                        } else {
                            this.$message.error(res.data.desc);
                        }
                    });
                }
            } else {
                this.$message.error(res.data.desc);
            }
        });

        this.suit();
        // axios({
        //     methods: 'get',
        //     url: axios.defaults.baseURL + 'Character/getAllList/'+localStorage.getItem('uid'),
        // }).then((res) => {
        //     // this.$message.success("接收到了信息")
        //     console.log(res)
        //     if (res.data.code === '000000') {
        //         let form = res.data.content;
        //         form.forEach((item,label)=>{
        //             let subform = {
        //                 name:item.c_name,
        //                 hp_percentage:10,
        //                 mp_percentage:10,
        //                 san_percentage:10,
        //                 attribue:item.attribute,
        //                 hms:{
        //                     hp_max:Math.floor(item.attribute.CON/5),
        //                     mp_max:Math.floor(item.attribute.POW/5),
        //                     san_max:Math.floor(item.attribute.POW),
        //                     hp:Math.floor(item.attribute.CON/5),
        //                     mp:Math.floor(item.attribute.POW/5),
        //                     san:5,
        //                 },
        //                 ability:item.ability
        //             }
        //             this.character_list.push(subform)
        //
        //         })
        //     } else {
        //         this.$message.error(res.data.desc)
        //     }
        // })
        // console.log(this.character_list)
        // this.character_list.forEach((item, index) => {
        //     // item.hp_percentage=Math.floor(item.hp/item.hp_max)*100
        //     // item.mp_percentage=Math.floor(item.mp/item.mp_max)*100
        //     // item.san_percentage=Math.floor(item.san/item.san_max)*100
        //     item.hp_percentage=20
        //     item.mp_percentage=80
        //     item.san_percentage=100
        //     console.log("测试元素")
        //     console.log(item)
        // })
    }
};
</script>

<style scoped>
.bg-purple {
    background: #d3dce6;
    min-height: 600px;
    opacity: 0.8;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.schart-box {
    display: inline-block;
    margin: 20px;
}

.schart {
    width: 600px;
    height: 400px;
}

.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}

.my-center {
    text-align: center;
}

</style>